<template>
  <div class="row full-width q-col-gutter-md">
    <q-charts :charts="charts" :colors="leftColors" :columns="leftColumns" :formatTooltip="formatTooltip" :grid="grid"
              :hideTooltips="['runHours']" :labelMap="chartMaps" :legend="legend" :rows="leftRows"
              :title="{ text: $t('Misc.AnnualRunningStats'), ...title }" :xSite="leftX" :ySite="ySite"
              classes="no-shadow col-sm-12 col-md-6" format></q-charts>
    <q-charts :charts="rightCharts" :colors="rightColors" :columns="rightColumns" :formatTooltip="formatTooltip"
              :grid="{ ...grid, right: 0 }" :labelMap="chartMaps" :legend="legend" :rows="rightRows"
              :title="{ text: $t('Misc.DailyDurationStats'), ...title }" :xSite="rightX" :ySite="rightY"
              classes="no-shadow col-sm-12 col-md-6"></q-charts>
  </div>
</template>

<script setup>
import { i18n } from 'boot/i18n'
import { date } from 'quasar'
import { adaptFontSize, formatNumber } from 'src/utils/utils.js'
import { computed, ref } from 'vue'

const props = defineProps({
  leftChartData: { type: Array, default: () => [] }, rightChartData: { type: Array, default: () => [] }
})
const chartMaps = computed(() => {
  return {
    runDate: i18n.t('Misc.RunningDuration'), runHours: i18n.t('Misc.RunningDuration'),
    freeDate: i18n.t('Misc.IdleDuration'), warnDate: i18n.t('Misc.ExceptionDuration'),
    chargeDate: i18n.t('Misc.ChargingDuration'), offlineDate: i18n.t('Misc.OfflineDuration'),
    runDistance: i18n.t('Misc.RunningMileage')
  }
})
const charts = [{
  type: 'bar', yAxisIndex: 1
}, {
  type: 'bar'
}, {
  type: 'line', yAxisIndex: 1, showSymbol: false
}]
const rightCharts = [{
  type: 'bar', stack: 'stack', barWidth: 14
}, {
  type: 'bar', stack: 'stack', barWidth: 14
}, {
  type: 'bar', stack: 'stack', barWidth: 14
}, {
  type: 'bar', stack: 'stack', barWidth: 14
}, {
  type: 'bar', stack: 'stack', barWidth: 14
}]
const leftColors = ['#333FFF', '#B2B7FF', '#FFB0E3']
const rightY = computed(() => {
  return [{
    type: 'category', axisTick: { show: false }, name: `${i18n.t('Duration')}/H`, nameGap: adaptSize.value * 1.5
  }]
})
const leftX = { axisLabel: { interval: 'auto' } }
const rightX = { type: 'value', show: false }
const rightColors = ['#333FFF', '#23B899', '#58CFFF', '#FFB0E3', '#969696']

const leftColumns = ref(['monthDate', 'runDate', 'runDistance', 'runHours'])
const rightColumns = ref(['dayDate', 'runDate', 'chargeDate', 'freeDate', 'warnDate', 'offlineDate'])
const adaptSize = computed(() => adaptFontSize(10))
const title = computed(() => ({ top: adaptSize.value * -0.5 }))
const legend = computed(() => ({ bottom: adaptSize.value * -0.5, top: 'auto' }))
const grid = computed(() => ({ bottom: adaptSize.value * 5, top: adaptSize.value * 5, right: adaptSize.value * 5 }))
const ySite = computed(() => {
  return [{
    name: `${i18n.t('Misc.RunningMileage')}/KM`, nameGap: adaptSize.value * 1.5
  }, {
    name: `${i18n.t('Misc.RunningDuration')}/H`, nameGap: adaptSize.value * 1.5
  }]
})
const leftRows = computed(() => {
  const { leftChartData = [] } = props
  return leftChartData.map(el => {
    const runDate = secondsToHours(el.runDate || 0), runDistance = metersToKilometers(el.runDistance || 0)
    return { monthDate: el.monthDate, runDate, runDistance, runHours: runDate }
  })
})
const rightRows = computed(() => {
  const { rightChartData = [] } = props
  return rightChartData.map(el => {
    const dayDate = date.formatDate(el.dayDate, 'M/D'), runDate = secondsToHours(el.runDate || 0)
    const chargeDate = secondsToHours(el.chargeDate || 0), freeDate = secondsToHours(el.freeDate || 0)
    const warnDate = secondsToHours(el.warnDate || 0), offlineDate = secondsToHours(el.offlineDate || 0)
    return { dayDate, runDate, chargeDate, freeDate, warnDate, offlineDate }
  })
})
const secondsToHours = seconds => formatNumber(seconds / 3600, 0)
const metersToKilometers = meters => formatNumber(meters / 1000, 0)
const formatTooltip = (list, field) => field === 'runDistance' ? `${list[field]}KM` : `${list[field]}H`
</script>

<style lang="scss" scoped>
.q-charts {
  aspect-ratio: 16/9;
}
</style>